<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图报表混用</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    let mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。
    var data = [
        {name: '北京', value: (Math.random() * 300).toFixed(2)},
        {name: '天津', value: (Math.random() * 300).toFixed(2)},
        {name: '上海', value: (Math.random() * 300).toFixed(2)},
        {name: '重庆', value: (Math.random() * 300).toFixed(2)},
        {name: '河北', value: (Math.random() * 300).toFixed(2)},
        {name: '河南', value: (Math.random() * 300).toFixed(2)},
        {name: '云南', value: (Math.random() * 300).toFixed(2)},
        {name: '辽宁', value: (Math.random() * 300).toFixed(2)},
        {name: '黑龙江', value: (Math.random() * 300).toFixed(2)},
        {name: '湖南', value: (Math.random() * 300).toFixed(2)},
        {name: '安徽', value: (Math.random() * 300).toFixed(2)},
        {name: '山东', value: (Math.random() * 300).toFixed(2)},
        {name: '新疆', value: (Math.random() * 300).toFixed(2)},
        {name: '江苏', value: (Math.random() * 300).toFixed(2)},
        {name: '浙江', value: (Math.random() * 300).toFixed(2)},
        {name: '江西', value: (Math.random() * 300).toFixed(2)},
        {name: '湖北', value: (Math.random() * 300).toFixed(2)},
        {name: '广西', value: (Math.random() * 300).toFixed(2)},
        {name: '甘肃', value: (Math.random() * 300).toFixed(2)},
        {name: '山西', value: (Math.random() * 300).toFixed(2)},
        {name: '内蒙古', value: (Math.random() * 300).toFixed(2)},
        {name: '陕西', value: (Math.random() * 300).toFixed(2)},
        {name: '吉林', value: (Math.random() * 300).toFixed(2)},
        {name: '福建', value: (Math.random() * 300).toFixed(2)},
        {name: '贵州', value: (Math.random() * 300).toFixed(2)},
        {name: '广东', value: (Math.random() * 300).toFixed(2)},
        {name: '青海', value: (Math.random() * 300).toFixed(2)},
        {name: '西藏', value: (Math.random() * 300).toFixed(2)},
        {name: '四川', value: (Math.random() * 300).toFixed(2)},
        {name: '宁夏', value: (Math.random() * 300).toFixed(2)},
        {name: '海南', value: (Math.random() * 300).toFixed(2)},
        {name: '台湾', value: (Math.random() * 300).toFixed(2)},
        {name: '香港', value: (Math.random() * 300).toFixed(2)},
        {name: '澳门', value: (Math.random() * 300).toFixed(2)}
    ];
    let xdata = ['-180','-179','-178','-177','-176','-175','-174','-173','-172','-171','-170','-169','-168','-167','-166','-165','-164','-163','-162','-161','-160','-159','-158','-157','-156','-155','-154','-153','-152','-151','-150','-149','-148','-147','-146','-145','-144','-143','-142','-141','-140','-139','-138','-137','-136','-135','-134','-133','-132','-131','-130','-129','-128','-127','-126','-125','-124','-123','-122','-121','-120','-119','-118','-117','-116','-115','-114','-113','-112','-111','-110','-109','-108','-107','-106','-105','-104','-103','-102','-101','-100','-99','-98','-97','-96','-95','-94','-93','-92','-91','-90','-89','-88','-87','-86','-85','-84','-83','-82','-81','-80','-79','-78','-77','-76','-75','-74','-73','-72','-71','-70','-69','-68','-67','-66','-65','-64','-63','-62','-61','-60','-59','-58','-57','-56','-55','-54','-53','-52','-51','-50','-49','-48','-47','-46','-45','-44','-43','-42','-41','-40','-39','-38','-37','-36','-35','-34','-33','-32','-31','-30','-29','-28','-27','-26','-25','-24','-23','-22','-21','-20','-19','-18','-17','-16','-15','-14','-13','-12','-11','-10','-9','-8','-7','-6','-5','-4','-3','-2','-1','0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99','100','101','102','103','104','105','106','107','108','109','110','111','112','113','114','115','116','117','118','119','120','121','122','123','124','125','126','127','128','129','130','131','132','133','134','135','136','137','138','139','140','141','142','143','144','145','146','147','148','149','150','151','152','153','154','155','156','157','158','159','160','161','162','163','164','165','166','167','168','169','170','171','172','173','174','175','176','177','178','179',];
    let ydata = ['90','89','88','87','86','85','84','83','82','81','80','79','78','77','76','75','74','73','72','71','70','69','68','67','66','65','64','63','62','61','60','59','58','57','56','55','54','53','52','51','50','49','48','47','46','45','44','43','42','41','40','39','38','37','36','35','34','33','32','31','30','29','28','27','26','25','24','23','22','21','20','19','18','17','16','15','14','13','12','11','10','9','8','7','6','5','4','3','2','1','0','-1','-2','-3','-4','-5','-6','-7','-8','-9','-10','-11','-12','-13','-14','-15','-16','-17','-18','-19','-20','-21','-22','-23','-24','-25','-26','-27','-28','-29','-30','-31','-32','-33','-34','-35','-36','-37','-38','-39','-40','-41','-42','-43','-44','-45','-46','-47','-48','-49','-50','-51','-52','-53','-54','-55','-56','-57','-58','-59','-60','-61','-62','-63','-64','-65','-66','-67','-68','-69','-70','-71','-72','-73','-74','-75','-76','-77','-78','-79','-80','-81','-82','-83','-84','-85','-86','-87','-88','-89','-90',];
    let griddata1 = [0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0187,0.0309,0.0160,0.0213,0.0128,0.0570,0.2395,0.7574,0.9551,2.3329,3.0699,4.7374,5.5312,6.2760,6.5013,8.6772,7.5541,7.4287,7.4645,8.3163,9.3063,7.4295,6.2113,6.0143,4.7990,5.1848,6.3116,8.2189,8.2480,6.9975,5.8466,5.4849,4.5586,6.0796,8.4692,9.6849,12.1818,9.6149,8.6559,9.0352,7.7340,5.1794,5.1660,6.6773,6.0658,2.3962,1.8867,2.2767,1.7949,1.6910,2.5316,1.9464,1.7699,0.8962,0.6724,0.7997,0.5852,1.1979,1.5227,1.3569,0.8030,0.5752,0.4545,0.7966,0.5978,0.8414,0.7303,0.7518,1.1235,1.1103,1.4353,0.7483,0.7126,0.9944,1.4917,1.0770,0.7263,0.9461,0.8591,0.8081,1.3984,0.9921,4.4202,4.7219,4.1248,2.5007,2.0597,1.6204,1.5902,1.5501,1.7289,1.1778,0.9646,1.2745,1.1787,0.9878,0.7044,1.3972,1.1452,0.8794,0.7846,0.8103,1.3046,0.4960,0.4829,0.4469,0.3335,0.6654,0.8420,1.2790,0.8180,0.7519,1.1408,0.3606,0.9691,0.6542,0.3845,0.3030,0.1541,0.1627,0.3644,0.2154,0.2372,0.2328,0.1393,0.1433,0.1410,0.2503,0.3119,0.1483,0.2241,0.2328,0.1992,0.1180,0.0655,0.0519,0.1158,0.0210,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,];
    let griddata2 = [0.0026,0.0028,0.0032,0.0075,0.0068,0.0128,0.0076,0.0104,0.0104,0.0079,0.008,0.0114,0.0137,0.0139,0.0129,0.012,0.0105,0.0107,0.007,0.0057,0.0052,0.0045,0.0066,0.007,0.0098,0.0113,0.0179,0.0211,0.0416,0.0332,0.0371,0.0573,0.045,0.0464,0.0235,0.0141,0.0151,0.0147,0.0064,0.005,0.0048,0.0109,0.0135,0.0059,0.0147,0.0081,0.0308,0.0672,0.1367,0.1817,0.178,0.1601,0.1002,0.0203,0.0113,0.0161,0.02,0.0159,0.0229,0.016,0.016,0.0092,0.0081,0.0141,0.022,0.0182,0.0273,0.0286,0.0295,0.0384,0.0321,0.0253,0.0275,0.0282,0.0225,0.025,0.032,0.026,0.0218,0.0182,0.0313,0.0196,0.0233,0.0192,0.0216,0.0231,0.0298,0.0274,0.03,0.0331,0.0195,0.0235,0.0182,0.0112,0.016,0.0122,0.0134,0.0126,0.0129,0.0247,0.0142,0.0162,0.015,0.017,0.018,0.017,0.0188,0.0235,0.0247,0.0096,0.0145,0.0174,0.0162,0.011,0.0095,0.0158,0.0201,0.0182,0.0177,0.0192,0.0139,0.0099,0.0143,0.0183,0.0132,0.0101,0.0135,0.0115,0.0084,0.0076,0.0062,0.0161,0.0072,0.0072,0.0094,0.0126,0.0119,0.0118,0.0266,0.0201,0.0196,0.0131,0.0126,0.0142,0.0141,0.0189,0.015,0.0122,0.0148,0.0221,0.0352,0.0323,0.0482,0.0694,0.0617,0.0383,0.0265,0.0398,0.0447,0.0406,0.0212,0.0126,0.0084,0.0115,0.0091,0.015,0.0267,0.0195,0.0165,0.0243,0.0255,0.0141,0.0227,0.025,0.0291,0.0312,0.0333,0.021,0.0201,0.0141,0.0288,0.0306,0.0555,0.0472,0.0307,0.0377,0.0256,0.0194,0.0783,0.0841,0.0178,0.0143,0.0255,0.0851,0.1229,0.1333,0.0755,0.0585,0.044,0.0388,0.0413,0.0357,0.066,0.0605,0.0549,0.0403,0.0334,0.0328,0.0339,0.0251,0.0219,0.0166,0.0292,0.0223,0.0193,0.0174,0.0136,0.0079,0.0205,0.0251,0.0186,0.0187,0.018,0.0443,0.0798,0.0554,0.0469,0.0428,0.0382,0.0364,0.0317,0.0361,0.0518,0.0612,0.0562,0.0357,0.0446,0.0529,0.0518,0.0482,0.0456,0.0426,0.0422,0.0567,0.0631,0.0553,0.0592,0.0574,0.0648,0.0616,0.0577,0.0567,0.0601,0.0581,0.0472,0.0508,0.0562,0.0535,0.0575,0.0648,0.0767,0.076,0.0642,0.07,0.0763,0.071,0.0579,0.0608,0.0693,0.0624,0.0696,0.1441,0.1614,0.0974,0.0447,0.0638,0.1099,0.0937,0.0722,0.0515,0.0396,0.0454,0.0608,0.0548,0.0602,0.052,0.0454,0.043,0.0338,0.0339,0.0315,0.0349,0.0235,0.0246,0.025,0.0271,0.0331,0.0192,0.0267,0.0258,0.0191,0.0262,0.0242,0.0219,0.0186,0.0161,0.0229,0.0191,0.022,0.0199,0.017,0.0072,0.0045,0.0096,0.0049,0.0034,0.0076,0.0089,0.0055,0.0056,0.0125,0.0066,0.0059,0.0028,0.0019,0.0002,0.0001,0.0001,0.0001,0.0009,0.0012,0.0014,0.0052,0.002,0.0047,0.0048,0.0095,0.0159,0.0232,0.0181,0.026,0.0072,0.0127,0.0092,0.0036,0.0027,0.0025,0.0017,0.0027,0.0021,0.0031,0.0047,0.004,0.0056,0.0051,0.0043,0.0022,0.0037,0.0099,0.0117,];
    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../config/grid_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            if(option != null)
            {
                mapOption = option;
                getMap();
            }
        });
    }
    /*
     * 读取geo地图数据并注入echarts api
     */
    let mapChart = echarts.init(document.getElementById('map'));// 初始化echarts对象为mapChart
    function getMap()
    {
        // 数据加载项，增强用户体验
        //mapChart.showLoading();
        // 地图json文件的地址
        var mapUrl = "../../mapData/map/json/china.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("china", json); // 注册地图
            mapOption.series[0].mapType = "china"; // 设置地图名称
            mapOption.series[0].data = data; // 设置地图名称
            mapOption.xAxis[1].data = xdata; // 设置报表1的X轴的数据
            mapOption.yAxis[0].data = ydata; // 设置报表2的x轴的数据
            mapOption.series[1].data = griddata1; //设置报表1的业务数据
            mapOption.series[2].data = griddata2; //设置报表2的业务数据
            mapChart.setOption(mapOption);
        });
    }
</script>
</html>